import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class StatisticPage extends StatefulWidget {
  const StatisticPage({super.key});

  @override
  State<StatisticPage> createState() => _StatisticPageState();
}

class _StatisticPageState extends State<StatisticPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
        child: Column(
          children: [
            Container(
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text(
                            'Statisic',
                            style: TextStyle(
                                fontSize: 24, fontWeight: FontWeight.w800),
                          ),
                        ),
                        Divider(
                          endIndent: 980,
                          thickness: 3.5,
                          color: Colors.pink[50],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Expanded(child: LayoutBuilder(
              builder: (BuildContext, BoxConstraints) {
                var BoxWidth = BoxConstraints.maxWidth;
                var BoxHeight = BoxConstraints.maxHeight;

                var le = BoxHeight / 20;

                return Container(
                  width: BoxWidth,
                  height: BoxHeight,
                  color: Color(0xFF003F6F),
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.only(top: le),
                        alignment: Alignment.topCenter,
                        child: Text(
                          'The numbers of WorldSkills compeitiors',
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w600,
                              color: Colors.white),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          width: BoxWidth * 0.8,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              NewWidget(
                                BoxWidth: BoxWidth,
                                BoxHeight: BoxHeight,
                                number: 848,
                              ),
                              NewWidget(
                                BoxWidth: BoxWidth,
                                BoxHeight: BoxHeight,
                                number: 931,
                              ),
                              NewWidget(
                                BoxWidth: BoxWidth,
                                BoxHeight: BoxHeight,
                                number: 1004,
                              ),
                              NewWidget(
                                BoxWidth: BoxWidth,
                                BoxHeight: BoxHeight,
                                number: 1186,
                              ),
                              NewWidget(
                                BoxWidth: BoxWidth,
                                BoxHeight: BoxHeight,
                                number: 1253,
                              ),
                              NewWidget(
                                BoxWidth: BoxWidth,
                                BoxHeight: BoxHeight,
                                number: 1355,
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ))
          ],
        ),
      ),
    );
  }
}

class NewWidget extends StatelessWidget {
  const NewWidget({
    super.key,
    required this.BoxWidth,
    required this.BoxHeight,
    required this.number,
  });

  final double BoxWidth;
  final double BoxHeight;
  final num number;

  @override
  Widget build(BuildContext context) {
    // return Container(
    //   child: Column(
    //     children: [
    //       Expanded(
    //         flex: 1,
    //         child: SizedBox(),
    //       ),
    //       Text('0'),
    //       Expanded(
    //         flex: 20,
    //         child: Container(
    //             width: 40,
    //             color: const Color(0xFF002D50),
    //             child: LayoutBuilder(builder: (BuildContext, Box) {
    //               var H = Box.maxHeight;
    //
    //               var N = 1500;
    //
    //               return Column(
    //                 mainAxisAlignment: MainAxisAlignment.end,
    //                 children: [
    //                   TweenAnimationBuilder(
    //                     tween: Tween(begin: 0.0, end: 1.0),
    //                     duration: Duration(milliseconds: 1),
    //                     builder: (BuildContext context),
    //                   )
    //                 ],
    //               );
    //             })),
    //       ),
    //       Text(BoxWidth > BoxHeight
    //           ? '  WorldSkills\nCalgary 2009'
    //           : 'WorldSkills\n   Calgary\n     2009'),
    //       Expanded(
    //         flex: 4,
    //         child: SizedBox(),
    //       ),
    //     ],
    //   ),
    // );
    var end = number / 1500;
    return TweenAnimationBuilder(
        tween: Tween(begin: 0.0, end: 1.0),
        duration: Duration(seconds: 2),
        builder: (BuildContext context, double v, Widget? child) {
          return Container(
            child: Column(
              children: [
                Expanded(
                  flex: 1,
                  child: SizedBox(),
                ),
                Container(
                  margin: EdgeInsets.symmetric(vertical: 10),
                  child: Text(
                    '${(v * number).truncate()}',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Expanded(
                  flex: 20,
                  child: Container(
                      width: BoxWidth > BoxHeight
                          ? BoxWidth * 0.04
                          : BoxHeight * 0.035,
                      color: const Color(0xFF002D50),
                      child: LayoutBuilder(builder: (BuildContext, Box) {
                        var H = Box.maxHeight;

                        return Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Container(
                              width: double.infinity,
                              height: v * H * end,
                              color: Color(0xFF008DFB),
                            )
                          ],
                        );
                      })),
                ),
                Container(
                  margin: EdgeInsets.symmetric(vertical: 10),
                  child: Text(
                    BoxWidth > BoxHeight
                        ? '  WorldSkills\nCalgary 2009'
                        : 'WorldSkills\n   Calgary\n     2009',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Expanded(
                  flex: 4,
                  child: SizedBox(),
                ),
              ],
            ),
          );
        });
  }
}
